<template>
<div class="app-container">

    <!-- 功能性按钮 -->
        <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="用户名">
                <el-input v-model.trim="query.username"></el-input>
            </el-form-item>
             <el-form-item label="手机号">
                <el-input v-model.trim="query.mobile"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button  icon="el-icon-refresh" @click="reload">重置</el-button>
                <el-button  icon="el-icon-plus" type="primary"  @click="openAdd"> 新增</el-button>
            </el-form-item>
        </el-form>

    <!-- 表格主体 -->
    <el-table :data="list" stripe style="width: 100%">
        <el-table-column width="60" type="index" label="序号"></el-table-column>
        <el-table-column prop="username" align="center" label="用户名"></el-table-column>
        <el-table-column prop="nickName" align="center" label="昵称"></el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号"></el-table-column>
        <el-table-column prop="email" align="center" label="邮箱"></el-table-column>
      
        <!-- 账号过期 -->
        <el-table-column prop="isAccountNonExpired" align="center" label="账号过期">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isAccountNonExpired === 0" type="danger">已过期</el-tag>
                <el-tag v-if="scope.row.isAccountNonExpired === 1" type="success">正常</el-tag>
            </template>
        </el-table-column>
        <!-- 账号锁定 -->
        <el-table-column prop="isAccountNonLocked" align="center" label="账号锁定">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isAccountNonLocked === 0" type="danger">已过期</el-tag>
                <el-tag v-if="scope.row.isAccountNonLocked === 1" type="success">正常</el-tag>
            </template>
        </el-table-column>
        <!-- 密码过期 -->
        <el-table-column prop="isCredentialsNonExpired" align="center" label="密码过期">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isCredentialsNonExpired === 0" type="danger">已过期</el-tag>
                <el-tag v-if="scope.row.isCredentialsNonExpired === 1" type="success">正常</el-tag>
            </template>
        </el-table-column>
         <!-- 是否可用 -->
        <el-table-column prop="isEnabled" align="center" label="是否可用">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.isEnabled === 0" type="danger">已删除</el-tag>
                <el-tag v-if="scope.row.isEnabled === 1" type="success">可用</el-tag>
            </template>
        </el-table-column>
        <el-table-column  label="操作" width="340px" >
                <template slot-scope="scope" v-if="scope.row.isEnabled === 1">
                <el-button type="success" @click="handleEdit(scope.row.id)" size="mini">编辑</el-button>
                <el-button type="danger"  @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
                <el-button type="primary" @click="handleRole(scope.row.id)" size="mini">设置角色</el-button>
                <el-button type="primary"  @click="handlePwd(scope.row.id)" size="mini">密码修改</el-button>
             </template>
        </el-table-column>
    </el-table>

     <!-- 分页功能 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
    
    <!-- 新增编辑弹窗组件 -->
    <edit :title="edit.title" :formData="edit.formData" :visible="edit.visible" :remoteClose="remoteClose"/>
        
    <!-- 角色弹窗弹出组件 -->
   <el-dialog title="设置角色" :visible.sync="role.visible" width="65%">
       <!-- roleIds是当前用户所拥有的角色ID，saveUserRole事件是子组件进行触发提交选择的角色 -->
         <role :roleIds="role.roleIds" @saveUserRole="saveUserRole"/>
    </el-dialog>

    <!-- 修改密码弹窗组件 -->
    <PassWord title="修改密码" :userId="pwd.userId" :visible="pwd.visible" :remoteClose="remotePwdClose" />
   
</div>
</template>

<script>
import { getList,getById,deleteById,getRoleIdsByUserId,saveUserRole } from '@/api/user'
import Edit from "./edit.vue"
import Role from "../role/index.vue"
import PassWord from "./password.vue"
export default {
    name:"User",
    components:{
        Edit,
        Role,
        PassWord
    },
    data(){
        return {
            list:[], //列表数据
            page:{
                total:0,  //总记录数
                current:1, //当前页码
                size:20 //每页多少条
            },
            query:{},//查询条件
            edit:{
                title:"",
                visible:false,
                formData:{}
            },
            role:{ //设置角色组件
                userId:null, //用户id
                visible:false,
                //传递到子组件中时，至少传递一个空数据[],子组件判断是否有roleIds值
                roleIds:[],//封装用户拥有角色ids,传递给角色列表子组件
            },
            pwd:{
                visible:false,
                userId:null
            }
        }
    },
    created(){
        this.fetchData()
    },
    methods:{
        async fetchData(){
            const res = await getList(this.query,this.page.current,this.page.size)
            this.list = res.data.records
            this.page.total = res.data.total
        },
        // 每页显示多少条，当页码改变后触发到此方法，val是当前点击或输入的那个页码
        handleSizeChange(val){
            this.page.size = val  //更新一页多少条
            this.fetchData()
        },
        //当页码改变后触发这个方法
        handleCurrentChange(val){
            this.page.current = val
            this.fetchData()
        },
         //条件查询
        queryData(){
            //将页码变为1
            this.page.current = 1
            this.fetchData()
        },
        //重置
        reload(){
            this.query = {}
            this.fetchData()
        },
        //编辑
        async handleEdit(id){
            //通过id查询数据
            const res = await getById(id)
            if(res.code === 20000){
                this.edit.formData = res.data
            }
            //弹出窗口标题
            this.edit.title = "编辑"
            //弹出窗口
            this.edit.visible = true
        },
        //删除
        async handleDelete(id){            
            this.$confirm('确认删除这条记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //发送删除请求  
                deleteById(id).then(res=>{
                    //处理响应结果
                    this.$message({
                        type: res.code === 20000 ? "success":"error",
                        message:res.message
                    });
                  //刷新列表
                  this.fetchData()                   
                })          
            }).catch(() => {
                //取消删除
            });
        
        },
        //设置角色
        handleRole(id){
            //用户id
            this.role.userId = id
            //查询用户当前拥有的角色ids
            getRoleIdsByUserId(id).then(res=>{
                // console.log(res.data)
                //角色id传递给子组件
                this.role.roleIds = res.data
                //查询后打开窗口
                this.role.visible = true
            })           
        },
        //密码修改
        handlePwd(id){
            //要修改密码的用户id
            this.pwd.userId = id
            //弹出修改密码窗口
            this.pwd.visible = true
        },
        //密码窗口关闭
        remotePwdClose(){
            this.pwd.userId = null
            this.pwd.visible = false
            this.fetchData()
        },
        //弹出编辑窗口
        openAdd(){
            this.edit.title = "新增——默认密码与用户名一致"
            this.edit.visible = true 
        },
        //关闭弹窗
        remoteClose(){
            this.edit.formData = {}
            this.edit.visible = false
            this.fetchData()
        },
        //角色列表子组件会触发此方法来保存当前用户选择的角色id
        saveUserRole(RoleIds){
           //1.保存用户角色信息
           saveUserRole(this.role.userId,RoleIds).then(res=>{
               if(res.code === 20000){
                   // 提交成功, 关闭窗口, 刷新列表
                    this.$message({
                    message: '保存成功',
                    type: 'success'
                    })
                    // 关闭窗口
                    this.role.visible = false
               }else{
                    this.$message({
                    type: 'error',
                    message: "保存失败"
                    });
               }
           })
           
        }
    }
}
</script>

<style scoped>

</style>
